<template>
    <a-form ref="formRef" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="菜单类型" :rules="rules.type" name="type">
            <a-radio-group v-model:value="form.type" :disabled="disabled" @change="onTypeClick">
                <a-radio :value="1">目录</a-radio>
                <a-radio :value="2">菜单</a-radio>
                <a-radio :value="3">按钮</a-radio>
            </a-radio-group>
        </a-form-item>
        <a-form-item label="菜单名称" :rules="rules.name" name="name">
            <a-input v-model:value="form.name" placeholder="请输入菜单名称" />
        </a-form-item>
        <a-form-item label="上级菜单" :rules="rules.parentId" name="parentId">
            <tree-select v-model:value="form.parentId" :tree-data="treeList" placeholder="请选择上级菜单" />
        </a-form-item>
        <a-form-item v-if="isMenu" label="菜单路径" :rules="rules.url" name="url" required>
            <a-input v-model:value="form.url" placeholder="请输入菜单路径" />
        </a-form-item>
        <a-form-item v-if="isMenu" label="组件名称" :rules="rules.moduleName" name="moduleName" required>
            <a-input v-model:value="form.moduleName" placeholder="请输入组件名称" />
        </a-form-item>
        <a-form-item v-if="isMenu" label="前端组件" :rules="rules.component" name="component" required>
            <a-input v-model:value="form.component" placeholder="请输入前端组件" />
        </a-form-item>
        <a-form-item v-if="form.type !== 3" label="图标" :rules="rules.icon" name="icon">
            <upload-image v-model:value="form.icon" accept=".svg" />
        </a-form-item>
        <a-form-item v-if="form.type === 3" label="授权标识" :rules="rules.auth" name="auth">
            <a-input v-model:value="form.auth" placeholder="请输入授权标识" />
        </a-form-item>
        <a-form-item label="排序号" :rules="rules.sort" name="sort">
            <a-input-number v-model:value.number="form.sort" :min="1" placeholder="请输入排序号">
                <template #addonAfter>
                    <a-tooltip placement="bottomRight">
                        <template #title>排序号越小越靠前</template>
                        <question-circle-outlined />
                    </a-tooltip>
                </template>
            </a-input-number>
        </a-form-item>
        <a-form-item label="状态" :rules="rules.status" name="status">
            <Switch v-model:checked="form.status" />
        </a-form-item>
        <a-form-item label="缓存" :rules="rules.keepAlive" name="keepAlive">
            <Switch v-model:checked="form.keepAlive" />
        </a-form-item>
        <a-form-item label="隐藏" :rules="rules.isHidden" name="isHidden">
            <Switch v-model:checked="form.isHidden" checked-children="隐藏" un-checked-children="显示" />
        </a-form-item>
    </a-form>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import { getTreeData } from '/@/api/System/Menu/index'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'
import { useForm } from '@iframe/tools/mixins/FormMixins'
import { Switch, TreeSelect, UploadImage } from '@iframe/tools/components'
import TreeUtils from '@iframe/tools/utils/TreeUtils'

const { validate, getForm, setForm } = useForm()
const formRef = ref()
const treeList = ref([])

const form = reactive({
    status: 0,
    keepAlive: 0,
    isHidden: 1
})
const rules = reactive({
    type: { required: true, message: '请选择菜单类型' },
    name: { required: true, message: '请输入菜单名称' },
    sort: { required: true, message: '请输入排序号' }
})

const disabled = computed(() => {
    return !!form.id
})
const isMenu = computed(() => {
    return form.type === 2
})
const onTypeClick = () => {
    form.parentId = null
    queryMenu(form.type)
}
const queryMenu = value => {
    getTreeData({ code: value }).then(result => {
        if (result.code === SUCCESS_CODE) {
            treeList.value = TreeUtils.generateTreeData(result.data)
        }
    })
}
defineExpose({ validate: validate(formRef), getForm: getForm(form), setForm: setForm(form), queryMenu })
</script>
